<template>
	<view>
		<view class="product">
			<view class="detail">
				<image :src="info.image" mode="aspectFill"></image>
				<view>￥{{info.price}}</view>
				<view>
					[{{info.travel.type}}] {{info.travel.title}}
					<view>
						{{info.travel.describe}}
					</view>
				</view>
			</view>
			<view class="uni-uploader-body">
				<uni-list>
					<uni-list-item title="商品团期" rightText="请选择出游团期" />
				</uni-list>
			</view>
			<view class="introduce">
				<uni-section type="line" title="行程介绍" />
				<view class="travel-introduce uni-flex">
					<view v-for="item,index in duceArr" class="introduce-item" 
						:class="{'introduce-item-active':activeIndex == index}" 
						:key="item.id"
						@click="activeIndex = index"
					>
						{{ item.text }}
					</view>
				</view>
				<view class="introduce-info">
					<view class="introduce-title">
						{{duceArr[activeIndex].text}}
					</view>
					<view v-if="activeIndex == 0">
						<view class="highlights" v-for="item,index in info.highlights" :key="index">
							{{item}}
						</view>
					</view>
					<view v-if="activeIndex == 1" class="scheduling">
						<plan-list v-for="item in info.scheduling" :data="item" :key='item.num'></plan-list>
					</view>
					<view v-if="activeIndex == 2">
						费用说明
					</view>
					<view v-if="activeIndex == 3">
						温馨提示
					</view>
				</view>
			</view>
		</view>
		<view class="buy-footer">
			<view class="buy-btn" @click="goBuy">立即抢购</view>
		</view>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import planList from './components/plan-list.vue'
	export default{
		components:{
			uniSection,
			uniList,
			uniListItem,
			planList
		},
		data() {
			return {
				info: {
					image:'https://m.jhly.cn/Public/images/ver3/els.jpg',
					price:2180,
					travel:{
						type:'跟团游',
						title:'西双版纳勐仑植物园、野象谷、、、双飞6日游',
						describe:'休闲，度假，新婚蜜月'
					},
					highlights:[
						'全程当地美食+孔雀宴+茶餐宴',
						'全程当地特色酒店',
						'普洱森林公园VIP通道 小熊猫 犀牛 长臂猿 静距离接触',
						'大佛寺景区VIP通道  神石祈福 金盆洗手 孔雀放飞',
						'优质导游服务，24小时管家服务让您出行无忧',
						'每人每天一瓶矿泉水'
					],
					scheduling:[{
						num:1,
						traffic:'济南-西双版纳',
						describe:'乘飞机抵达素有“春城”美誉的昆明，云南意即“彩云之南”，以其美丽、丰饶、神奇而著称于世，一向被外界称为“秘境”。有工作人员鲜花接机，商务专车带您抵达酒店，办理入住手续。全程无障碍，一站式服务，温馨体贴。根据航班时间安排赠送滇池大坝是昆明看海鸥的一个不错选择。地方宽敞，也没有门票。时值春夏交替，大坝旁开满了粉色的杜鹃，很是漂亮。大坝这边空气也比城里好很多。每年冬季成千上万的红嘴鸥从遥远的西伯利亚飞到这里，吸引了百万游客来参观这壮观的景象',
						meal:{
							breakfast:'自助餐',
							lunch:'茶餐宴',
							dinner:'正餐'
						},
						stay:'新思潮、润恒、恒兴、润都酒店,欣润酒店及同级',
						remark:'如遇政府接待或其它特殊原因，不能安排备选酒店时，我社有权安排同级别、同标准的其他酒店'
					}],
				},
				duceArr:[
					{
						id:0,
						text:'产品特色'
					},
					{
						id:1,
						text:'行程安排'
					},
					{
						id:2,
						text:'费用说明'
					},
					{
						id:3,
						text:'温馨提示'
					}
				],
				activeIndex:1
			}
		},
		methods:{
			goBuy(){
				uni.navigateTo({
					url:'/pages/order/order'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #e3e3e3;
		/* padding: 0 20px; */
	}
	.product{
		padding-bottom: 75rpx;
		/* margin-bottom: 80rpx; */
	}
	.detail,.travel-introduce{
		padding-left: 32rpx;
		padding-right: 20rpx;
		background-color: #fff;
	}
	.detail image{
		width: 100%;
	}
	.introduce{
		background-color: #fff;
	}
	.travel-introduce{
		margin-top: 20rpx;
	}
	.introduce-item{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.introduce-item-active{
		color: #fb9219;
		border-bottom: 2px solid #fb9219;
	}
	.introduce-info{
		border-top: 1px solid #007AFF;
		background-color: #fff;
		margin: 0 20rpx;
		padding: 20rpx;
	}
	.introduce-title{
		color: #fb9219;
	}
	.highlights::before{
		content: ' ';
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		background-color: #000000;
		border-radius: 15rpx;
		margin-right: 10rpx;
	}
	.buy-footer{
		background-color: #fff;
		border-top: 1px solid #ccc;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	.buy-btn{
		padding: 15rpx;
		line-height: 50rpx;
		background-color: #ff4401;
		width: 40%;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
		margin-left: 50%;
	}
</style>
